<template>
  <div ref="printPayment" id="printPayment" style="width: 690px;page-break-after: always">
    <div class="pageTitle">合同付款审批表</div>
    <table style="border-collapse: collapse">
      <tbody>
        <tr>
          <td class="label" colspan="6" style="text-align: left">合同基本信息:</td>
        </tr>
        <tr>
          <td class="label">申请流水号</td>
          <td>{{ payment.applyNo }}</td>
          <td class="label">申请人</td>
          <td>{{ payment.applyUserName }}</td>
          <td class="label">申请时间</td>
          <td>{{ formatDate(payment.applyTime || '', 'yyyy-MM-dd') }}</td>
        </tr>
        <tr>
          <td class="label">合同编号</td>
          <td>{{ project.contractNumber }}</td>
          <td class="label">合同名称</td>
          <td colspan="3">{{ project.contractName }}</td>
        </tr>
        <tr>
          <td class="label">合同总金额</td>
          <td>{{ project.amount }}</td>
          <td class="label">签订公司</td>
          <td>{{ project.signCompany }}</td>
          <td class="label">供应商名称</td>
          <td>{{ project.supplierName }}</td>
        </tr>
        <tr>
          <td class="label">采购订单号</td>
          <td>{{ project.busKey }}</td>
          <td class="label">费用支出号</td>
          <td colspan="3">{{ task.costNumber }}</td>
        </tr>
        <tr>
          <td class="label">付款节点内容</td>
          <td colspan="5">{{ task.paymentContent }}</td>
        </tr>
        <!-- 合同付款信息 -->
        <tr>
          <td class="label" colspan="6" style="text-align: left">合同付款信息:</td>
        </tr>
        <tr>
          <td class="label">PO单行号</td>
          <td>{{ task.poLine }}</td>
          <td class="label">节点金额（含税）</td>
          <td>{{ task.paymentAmount }}</td>
          <td class="label">水电费承担方</td>
          <td>
            <span
              v-for="(item, index) in waterAndElectricityPayOptions"
              :key="'waterAndElectricityPayOptionsA' + index"
              v-show="project.waterAndElectricityPay == item.value"
              >{{ item.label }}
            </span>
          </td>
        </tr>
        <tr>
          <td class="label">税率</td>
          <td>{{ task.taxRate + '%' }}</td>
          <td class="label">本次支付金额（含税）</td>
          <td>{{ payment.payAmount }}</td>
          <td class="label">本次过账金额（含税）</td>
          <td>{{ payment.postAmount }}</td>
        </tr>
        <tr>
          <td class="label">付款补充说明</td>
          <td colspan="5">{{ payment.remark }}</td>
        </tr>
        <tr>
          <td class="label">是否数字贷</td>
          <td colspan="2">{{ payment.digitalLoan ? '是' : '否' }}</td>
          <td class="label">备案证名称：</td>
          <td colspan="2">{{ payment.filingName }}</td>
        </tr>
        <!-- 累计扣罚金额 -->
        <tr>
          <td class="label" colspan="6" style="text-align: left">累计扣罚金额:</td>
        </tr>
        <tr>
          <td class="label">质量通知单号</td>
          <td class="label">OA流水号</td>
          <td class="label">违约类型</td>
          <td class="label">审批扣罚金额</td>
          <td class="label">开票金额</td>
          <td class="label">本次扣罚</td>
        </tr>
        <tr v-show="qualityRecords.length > 0" v-for="(item, index) in qualityRecords" :key="index">
          <td>{{ item.qualityNo }}</td>
          <td>{{ item.oaLsh }}</td>
          <td>
            <span
              v-for="(type, index) in qualityTypeOptions"
              :key="'qualityTypeA' + index"
              v-show="item.qualityType && item.qualityType.split(',').indexOf(type.value) > -1"
            >
              {{ type.label }}
            </span>
          </td>
          <td>{{ item.spFineAmount }}</td>
          <td>
            <span
              v-for="(reduce, iindex) in reduceOption"
              :key="'reduceA' + iindex"
              v-show="reduce.value == item.reduce"
            >
              {{ reduce.label }}
            </span>
          </td>
          <td>
            <span v-for="(fine, iindex) in fineOption" :key="'fineA' + iindex" v-show="fine.value == item.fine">
              {{ fine.label }}
            </span>
          </td>
        </tr>
        <tr v-show="!qualityRecords || qualityRecords.length == 0">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <!-- 审批意见 -->
        <tr>
          <td class="label" colspan="6" style="text-align: left">审批意见:</td>
        </tr>
        <tr
          v-for="(item, index) in finalComments"
          :key="'process' + index"
          v-show="finalComments.length > 0 && item.taskDefKey != '使用部门' && item.taskDefKey != '维护部门'"
        >
          <td class="label">{{ item.taskDefKey }}</td>
          <td colspan="5">
            <div style="padding: 5px 10px">
              <div style="min-height: 30px">
                {{ item.fullMessage }}
              </div>
              <div style="display: flex; justify-content: flex-end">
                <span style="padding: 2px 5px; width: 120px"> 签名：{{ item.userName }} </span>
                <span style="padding: 2px 5px; width: 130px">
                  日期：{{ formatDate(item.time || '', 'yyyy-MM-dd') }}
                </span>
                <span style="padding: 2px 5px; width: 70px">
                  {{ item.taskMessage }}
                </span>
              </div>
            </div>
          </td>
        </tr>
        <tr v-for="(item, index) in notifys" :key="'notifys' + index" v-show="notifys.length > 0">
          <td class="label">抄送人</td>
          <td colspan="5">
            <div style="padding: 5px 10px">
              <div style="min-height: 30px">
                {{ item.opinion }}
              </div>
              <div style="display: flex; justify-content: flex-end">
                <span style="padding: 2px 5px; width: 120px"> 签名：{{ item.receiverName }} </span>
                <span style="padding: 2px 5px; width: 130px">
                  日期：{{ formatDate(item.updateTime || '', 'yyyy-MM-dd') }}
                </span>
                <span style="padding: 2px 5px; width: 70px">
                  {{ item.taskMessage }}
                </span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { formatDate,parseTime } from '@/utils/util'
import printJS from 'print-js'
export default {
  props: {
    project: {
      type: Object,
      default: () => {
        return {}
      },
    },
    task: {
      type: Object,
      default: () => {
        return {}
      },
    },
    payment: {
      type: Object,
      default: () => {
        return {}
      },
    },
    qualityRecords: {
      type: Array,
      default: () => {
        return []
      },
    },
    comments: {
      type: Array,
      default: () => {
        return []
      },
    },
    notifys: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      nodeStatusOptions: ['逾期', '正常'],
      delayReasonOptions: ['甲方', '乙方', '双方'],
      resultOptions: ['完成', '质量合格'],
      yesOrNo: ['是', '否'],
      waterAndElectricityPayOptions: [
        { value: '1', label: '甲方' },
        { value: '2', label: '乙方' },
      ],
      reduceOption: [
        { label: '不变', value: '0' },
        { label: '减少', value: '1' },
      ],
      fineOption: [
        { label: '否', value: '0' },
        { label: '是', value: '1' },
      ],
      billTypeOptions: [
        { value: 1, label: '扣罚类(含非扣罚的质量问题)' },
        { value: 2, label: '非扣罚类' },
      ],
      qualityTypeOptions: [
        { value: '1', label: '质量投诉' },
        { value: '2', label: '现场管理投诉' },
        { value: '3', label: '安全事故' },
        { value: '4', label: '进度' },
        { value: '5', label: '延期申请' },
      ],
      finalComments: [],
    }
  },
  computed: {},
  methods: {
    formatDate,
    print() {
      printJS({
        printable: 'printPayment',
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
        maxWidth: '690px',
        style:
          '@media print {@page {size:  21cm 29.7cm;}#printContainer {text-align: center;color: black;}#printContainer table {background-color: black;}#printContainer table td {background-color: white;}#printContainer .label {font-size: 14px;text-align: center;font-weight: bold;}.pageTitle {font-size: 21px;font-weight: bold;text-align: center;}table {width: 690px;border-collapse: collapse;}table tr    { page-break-inside:avoid; page-break-after:auto }table tr td {font-size: 14px;height: 30px;  min-width: 110px;word-break: break-all;padding: 5px 5px;text-align: left; border: 1px solid #000;}',
      })
    },
    checkComments() {
      if (this.comments) {
        let infoList = []
        this.comments.forEach((c) => {
          if (c.infoList && c.infoList.length > 0) {
            c.infoList.forEach(i=>{
              i.defId = c.defId
              i.taskDefKey = c.name
              if (!i.time) {
                i.time = parseTime(new Date())
              }
            })
            infoList = [...infoList, ...c.infoList]
          }
        })
        if (infoList.length > 2 && infoList[0].time > infoList[1].time) {
          this.$set(this, 'finalComments', [...infoList].reverse())
        } else {
          this.$set(this, 'finalComments', [...infoList])
        }
      } else {
        this.$set(this, 'finalComments', [])
      }
      this.$forceUpdate()
    },
  },
  watch: {
    comments: {
      handler(newV, oldV) {
        this.checkComments()
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
<style scoped>
#printContainer {
  text-align: center;
  color: black;
}

#printContainer table {
  background-color: black;
}

#printContainer table td {
  background-color: white;
}

#printContainer .label {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.pageTitle {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

table {
  width: 690px;
}

table tr td {
  font-size: 14px;
  height: 30px;
  min-width: 110px;
  padding: 5px 5px;
  text-align: left;
  word-break: break-all;
  border: 1px solid #000;
}
</style>
